<template>
  <view class="share-box-page">
    <uni-popup ref="pop" type="bottom">
      <view class="share-container" :style="data.pageBottom">
        <view class="share-list">
          <view
            class="share-box"
            v-for="(item, index) in data.shareList"
            :key="index"
            @click="share(item.type)"
          >
            <button
              class="button"
              v-if="item.type == 1"
              open-type="share"
            ></button>
            <view class="icon-box" :style="{ backgroundColor: item.color }"
              ><text class="nb_icon" :class="item.icon"></text
            ></view>
            <view class="txt">{{ item.txt }}</view>
          </view>
        </view>
        <view class="cancle" @click="close">取消</view>
      </view>
    </uni-popup>
    <!-- #ifdef MP-WEIXIN -->
    <tt-poster
      ref="posterPop"
      v-if="data.showPoster"
      :posterData="props.data"
    ></tt-poster>

    <!-- #endif -->
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import {
  reactive,
  getCurrentInstance,
  ref,
  defineProps,
  onMounted,
  defineExpose,
} from "vue";
import { onLoad } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();
/**
 * 接口
 */
import { shareList } from "@/data/index.ts";
import { shortRecordOperation } from "@/apis/short.ts";
/**
 * 父组件数据
 */

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  short: {
    type: Object,
  },
});
/**
 * 定义父组件方法
 */
const emit = defineEmits(["chShort"]);

/**
 * 数据
 */
const data = reactive({
  shareList,
  pageBottom: {},
  showPoster: false,
});
/**
 * 方法
 */
const pop = ref(0);
const posterPop = ref(0);

onMounted(() => {
  let systemInfo = proxy.$config.systemInfo();
  data.pageBottom = {
    "padding-bottom": `${
      proxy.$utils.rpx2px(20) + systemInfo.safeAreaInsets.bottom
    }px`,
  };
  data.showPoster = true;
});
const open = () => {
  pop.value.open();
};
const share = (type: any) => {
  pop.value.close();
  shortRecordOperation({
    share: 1,
    type: 2,
    shortId: props.short.id,
  }).then((res: any) => {
    let opretion = {
      share: props.short.operation.share + 1,
      index: props.index,
      type: 2,
    };
    emit("chShort", opretion);
  });
  switch (type) {
    case 2:
      // #ifdef MP
      posterPop.value.open();
    // #endif
  }
};
const close = () => {
  pop.value.close();
};
defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.share-box-page {
  .share-container {
    padding: 60rpx 40rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .share-list {
      display: flex;
      justify-content: space-around;
      .share-box {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
        .icon-box {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          .nb_icon {
            color: #fff;
          }
        }

        .txt {
          margin-top: 10rpx;
          font-size: 20rpx;
        }
      }
    }
    .cancle {
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
